<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <p>{{num}}</p>

        <!-- <comp-test :count="num"></comp-test> -->
        <!-- <comp-test v-model="num"></comp-test> -->

        <!-- <aaa>
            <bbb>
                <comp-test v-model="num"></comp-test>
            </bbb>
        </aaa>

        <ccc ref="ccc"></ccc> -->
    </div>
</body>
<script>
    var bus = new Vue();
    /*
    组件通信 => 组件之间也可以进行数据传递(前提: 单向数据流 -> 子组件不能直接修改父组件传递的数据)


    父子组件通信
    父传子
    1. 父组件传递静态属性(属性值只能是字符串) / 动态属性(属性值可以任意类型)
    2. 子组件通过props进行接收    
    props: ["a","b","data-id"]
    props: { 
        a:String,
        b:Number,
    }
    props: { 
        a:{
            type:[String,Number],
            default:"hello",
            required:true,
            validate:function(val){
                if(typeof val ==="number"){

                }    
            }
        },
        b:Number,
    }

    3. 父组件传入的数据 => 一部分被props接收(this.$props)  => this.xxx
                       => 还有一部分没被props接收(this.$attrs),会被子组件的根元素继承   (inheritAttrs:false)           


    子传父 (单向数据流 -> 子组件不能直接修改父组件传递的数据)
    1. 父组件传递数据 绑定自定义事件传入改变数据的方法
    <component :count="num" @update:count="(v)=>num=v"></component>
    <component :count.sync="num"></component>
   

    2. 子组件接收数据, 必要时触发自定义事件
    a. props:["count"] 
    b. this.$emit("update:count",100)

    3. 给组件绑定v-model
    父组件: <component v-model="num"></component>
    子组件: 
        model:{
            prop:"count",
            event:"update:count",
        }


    非父子: 同级 跨级
    1. 组件的层级查找 $parent  $root  $children  $refs
    2. 转化为父子通信  => 找到两个组件的共同的父组件  通过父组件传递数据
    3. 事件总线  => a. 需要修改数据的组件绑定自定义事件  b. 传入数据的组件触发自定义事件
    4. provide  inject

    */


    Vue.component("comp-test", {
        model: {
            prop: "count",  // count = num
            event: "update:count",
        },
        props: {
            count: Number
        },
        data() {
            return {

            }
        },
        template: `<div @click="$emit('update:count',count+1)">{{count}}</div>`,
    })


    var vm = new Vue({
        el: "#app",
        data: {
            num: 1
        }
    })



</script>

</html>